import React from 'react';
import { Card } from '@arco-design/web-react';
import styles from './style/index.module.less';
import {
  DeviceRecord,
  resolveDeviceActivateState, resolveDeviceRunningState,
  resolveDeviceRunningStateColor
} from '@/constants';

export default (props: {
  record: DeviceRecord
}) => {
  return (
    <Card hoverable>
      <div className={styles['device-card']}>
        <img
          alt="dessert"
          src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
        />
        <div>
          <div> {props.record.name} </div>
          <div> {props.record.code} </div>
          {
            'ACTIVATED' === props.record.activateState.toString() &&
            <div>
              <div style={{ background: resolveDeviceRunningStateColor(props.record.runningState) }}></div>
              <div> {resolveDeviceRunningState(props.record.runningState)} </div>
            </div>
          }
          {
            'ACTIVATED' !== props.record.activateState.toString() &&
            <div> {resolveDeviceActivateState(props.record.activateState)} </div>
          }
        </div>
      </div>
    </Card>
  );
};
